import QtQuick 1.0
import com.nokia.symbian 1.0

Window {
    id: cookingDataEditorMainWindow
    width: 360
    height: 640

    property QtObject recipe;
    property QtObject region;
    property QtObject cuisine;
    property QtObject flavour;
    property QtObject technique;
    property QtObject dishType;
    property QtObject foodType;

    // Didn't create them as Page
    property IngredientEditor myIngredientEditor;
    property StepEditor myStepEditor;

    Component.onCompleted: {
        readRecipe()
        editStack.push(introPage)
    }

    function readRecipe() {
        // Init properties
        recipe = engine.recipe(1)
        region = engine.region(1)
        cuisine = engine.cuisine(1)
        flavour = engine.flavour(1)
        technique = engine.technique(1)
        dishType = engine.dishType(1)
        foodType = engine.foodType(1)

        // Init view elements
        recipeNameText.text = recipe.name;
        descriptionText.text = recipe.description

        // Read region and cuisine
        regionInput.text = region.name
        cuisineInput.text = cuisine.name

        // Read flavour, technique, dishType, foodType
        flavourInput.text = flavour.name
        techniqueInput.text = technique.name
        dishTypeInput.text = dishType.name
        foodTypeInput.text = foodType.name
    }

    function saveRecipe() {
        var newRecipeId = engine.addRecipe(recipe);

        // Save ingredient & steps
        if(myIngredientEditor)
            myIngredientEditor.saveIngredient()

        if(myStepEditor)
            myStepEditor.saveSteps()

        console.debug("newRecipeId", newRecipeId)
    }

    function changeRegion(myIndex)
    {
        // The index from 1 to n in engine side, so we need +1
        var newRegion = engine.region(myIndex + 1).name;
        regionInput.text = newRegion
        region.name = newRegion
    }

    function changeCuisine(myIndex)
    {
        var newCuisine = engine.cuisine(myIndex).name;
        cuisineInput.text = newCuisine
        cuisine.name = newCuisine
    }

    Image {
        id: bg
        anchors.fill: parent
        smooth: true
        source: "../Resource/bg.png"
    }

    PageStack {
        id: editStack
        //        toolBar: myToolBar
    }

    ToolBar {
        id: myToolBar
        anchors.bottom: parent.bottom

        Rectangle {
            id: saveBtn
            x: 127
            y: 591
            width: 100
            height: 40
            color: "#ffffff"
            radius: 15
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 10
            anchors.right: parent.right
            anchors.rightMargin: 10

            Text {
                x: 28
                y: 6
                text: "Save"
                font.family: "Hobo Std"
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: 20
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    // Save to db
                    saveRecipe()
                }
            }
        }

        Rectangle {
            id: backBtn
            width: 100
            height: 40
            color: "#ffffff"
            radius: 15
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 10
            anchors.left: parent.left
            anchors.leftMargin: 10

            Text {
                x: 39
                y: 13
                text: "Back"
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                font.family: "Hobo Std"
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: 20
            }

            MouseArea {
                id: mousearea1
                visible: true
                anchors.fill: parent

                onClicked: {

                    if(myIngredientEditor)
                    {
                        if(myIngredientEditor.visible)
                        {
                            myIngredientEditor.visible = false
                            return;
                        }
                    }

                    if(myStepEditor)
                    {
                        if(myStepEditor.visible)
                        {
                            myStepEditor.visible = false
                            return;
                        }
                    }

                    editStack.pop()
                }
            }
        }
    }

    Page {
        id: introPage
        Rectangle {
            id: introView
            width: 300
            height: 520
            x: 30
            y:60
            color: "#00000000"
            radius: 9
            border.width: 4
            border.color: "#64fd9839"
            anchors.verticalCenter: parent.verticalCenter

            Text {
                id: text1
                color: "#ffffff"
                text: "Create your recipe"
                anchors.top: parent.top
                anchors.topMargin: 10
                anchors.horizontalCenter: parent.horizontalCenter
                font.family: "Hobo Std"
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: 19
            }

            Rectangle {
                id: rectangle2
                width: 160
                height: 45
                color: "#ffffff"
                radius: 9
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 60

                Text {
                    id: text2
                    text: "Go"
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    font.family: "Hobo Std"
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    smooth: true
                    font.pixelSize: 30
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        editStack.push(briefInfoPage)
                    }
                }
            }

            Image {
                x: 7
                y: 94
                width: 170
                height: 198
                smooth: true
                source: "../Resource/cook.png"
            }

            TextEdit {
                x: 24
                y: 343
                width: 247
                height: 64
                color: "#ffffff"
                readOnly: true
                text: "Fill up forms to set up your own recipe"
                font.family: "Hobo Std"
                wrapMode: TextEdit.WordWrap
                font.pixelSize: 19
            }
        }
    }

    Page {
        id: briefInfoPage
        Rectangle {
            width: 300
            height: 520
            color: "#00000000"
            radius: 9
            border.color: "#6461caac"
            border.width: 4
            anchors.centerIn: parent

            Text {
                id: text3
                x: 56
                color: "#ffffff"
                text: "Enter brief information"
                font.pixelSize: 19
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                anchors.topMargin: 10
                font.family: "Hobo Std"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }

            Rectangle {
                id: rectangle3
                x: 50
                y: 276
                width: 168
                height: 45
                color: "#ffffff"
                radius: 10
                anchors.horizontalCenter: parent.horizontalCenter
                Text {
                    id: text4
                    x: 69
                    y: 16
                    text: "Enter detail"
                    smooth: true
                    font.pixelSize: 30
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    font.family: "Hobo Std"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        editStack.push(detailedInfoPage)
                    }
                }
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 10
            }

            Item {
                id: item1
                anchors.bottom: rectangle3.top
                anchors.bottomMargin: 6
                anchors.top: text3.bottom
                anchors.topMargin: 6
                anchors.right: parent.right
                anchors.rightMargin: 6
                anchors.left: parent.left
                anchors.leftMargin: 6

                Column {
                    id: column1
                    anchors.fill: parent

                    Item {
                        id: cuisineNameEditLine
                        width: parent.width
                        height: 60

                        Text {
                            id: text5
                            anchors.left: parent.left
                            anchors.leftMargin: 4
                            anchors.verticalCenter: parent.verticalCenter
                            text: "RecipeName"
                            smooth: true
                            font.family: "Hobo Std"
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignHCenter
                            font.pixelSize: 18
                        }

                        TextField {
                            id: recipeNameText
                            x: 115
                            y: 5
                            width: 160
                            height: 40
                            font: text6.font
                            placeholderText: "Recipe name"
                            anchors.right: parent.right
                            anchors.rightMargin: 10
                            anchors.verticalCenter: parent.verticalCenter
                            onTextChanged: {
                                recipe.name = text
                            }
                        }
                    }

                    Item {
                        id: descriptionEditLine
                        width: parent.width
                        height: 200

                        Text {
                            id: text6
                            text: "Description"
                            smooth: true
                            anchors.top: parent.top
                            anchors.topMargin: 4
                            anchors.left: parent.left
                            anchors.leftMargin: 4
                            font.family: "Hobo Std"
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignHCenter
                            font.pixelSize: 18
                        }

                        TextArea {
                            id: descriptionText
                            placeholderText: "Enter your description here"
                            font: text6.font
                            smooth: true
                            anchors.bottom: parent.bottom
                            anchors.bottomMargin: 4
                            anchors.right: parent.right
                            anchors.rightMargin: 4
                            anchors.left: parent.left
                            anchors.leftMargin: 4
                            anchors.top: text6.bottom
                            anchors.topMargin: 4

                            onTextChanged: {
                                recipe.description = text
                            }
                        }
                    }

                    Item {
                        id: pictureEditLine
                        width: parent.width
                        height: 156

                        Text {
                            id: text7
                            text: "Picture"
                            anchors.left: parent.left
                            anchors.leftMargin: 4
                            anchors.top: parent.top
                            anchors.topMargin: 4
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignHCenter
                            font.family: "Hobo Std"
                            font.pixelSize: 18
                        }

                        Switch {
                            id: picSwitch
                            y: 46
                            width: 60
                            height: 32
                            anchors.left: parent.left
                            anchors.leftMargin: 0
                            anchors.top: text7.bottom
                            anchors.topMargin: 4
                        }

                        Flipable {
                            id: picArea
                            x: 120
                            y: 8
                            width: 140
                            height: 140
                            anchors.verticalCenterOffset: 0
                            anchors.verticalCenter: parent.verticalCenter
                            smooth: true

                            property bool flipped: picSwitch.checked

                            front: Image { source: "qrc:/Resource/none.png"; smooth: true; anchors.fill: parent }
                            back: Image { source: "../Resource/kungpao.jpg"; smooth: true; anchors.fill: parent }

                            transform: Rotation {
                                id: rotation
                                origin.x: picArea.width/2
                                origin.y: picArea.height/2
                                axis.x: 0; axis.y: 1; axis.z: 0
                                angle: 0
                            }

                            states: State {
                                name: "back"
                                PropertyChanges { target: rotation; angle: 180 }
                                when: picArea.flipped
                            }

                            transitions: Transition {
                                NumberAnimation { target: rotation; property: "angle"; duration: 800; easing.type: Easing.OutQuad }
                            }
                        }

                        // Border rectangle
                        //                    Rectangle {
                        //                        id: rectangle4
                        //                        x: 119
                        //                        y: 7
                        //                        width: 142
                        //                        height: 142
                        //                        color: "#00000000"
                        //                        radius: 6
                        //                        opacity: 0.6
                        //                        smooth: true
                        //                        border.width: 8
                        //                        border.color: "#33d9e8"
                        //                    }
                    }
                }
            }
        }
    }

    Page {
        id: detailedInfoPage
        Rectangle {
            width: 300
            height: 520
            color: "#00000000"
            radius: 9
            border.color: "#ffffff"
            anchors.centerIn: parent
            border.width: 4

            Text {
                id: text8
                x: 139
                color: "#ffffff"
                text: "Enter detailed info"
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                anchors.topMargin: 10
                font.family: "Hobo Std"
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: 19
            }

            Rectangle {
                id: rectangle1
                y: 407
                width: 100
                height: 100
                color: "#ffffff"
                radius: 10
                anchors.left: parent.left
                anchors.leftMargin: 32
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 13

                Text {
                    id: text9
                    text: "Add Ingredient"
                    wrapMode: Text.WordWrap
                    anchors.fill: parent
                    font.family: "Hobo Std"
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    font.pixelSize: 19
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        // Show ingredient editor
                        if(cookingDataEditorMainWindow.myIngredientEditor)
                        {
                            cookingDataEditorMainWindow.myIngredientEditor.visible = true;
                            return;
                        }

                        var component = Qt.createComponent("IngredientEditor.qml");
                        if (component.status == Component.Ready)
                        {
                            var ingredientEditor = component.createObject(cookingDataEditorMainWindow);
                            if( null == ingredientEditor)
                            {
                                console.debug("Create failed")
                                return;
                            }

                            ingredientEditor.anchors.centerIn = cookingDataEditorMainWindow
                            cookingDataEditorMainWindow.myIngredientEditor = ingredientEditor;
                            ingredientEditor.readIngredients()
                        }
                    }
                }
            }

            Item {
                id: item2
                anchors.right: parent.right
                anchors.rightMargin: 6
                anchors.left: parent.left
                anchors.leftMargin: 6
                anchors.bottom: rectangle1.top
                anchors.bottomMargin: 6
                anchors.top: text8.bottom
                anchors.topMargin: 6

                Column {
                    id: column2
                    spacing: 4
                    smooth: true
                    anchors.fill: parent

                    Item {
                        id: item3
                        width: parent.width
                        height: 100

                        Text {
                            id: regionLabel
                            x: 4
                            y: 21
                            text: "Region"
                            anchors.left: parent.left
                            anchors.leftMargin: 4
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignHCenter
                            font.family: "Hobo Std"
                            font.pixelSize: 18
                        }

                        Text {
                            id: cuisineLabel
                            x: 4
                            y: 65
                            text: "Cuisine"
                            anchors.left: parent.left
                            anchors.leftMargin: 4
                            font.family: "Hobo Std"
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignHCenter
                            font.pixelSize: 18
                        }

                        Rectangle {
                            id: regionInputArea
                            y: 16
                            width: 140
                            height: 36
                            color: "#ffffff"
                            radius: 10
                            anchors.right: parent.right
                            anchors.rightMargin: 60
                            border.width: 4
                            border.color: "#4acf9f"

                            TextInput {
                                id: regionInput
                                x: 7
                                y: 8
                                width: 100
                                height: 20
                                text: "PlaceHolder"
                                readOnly: true
                                smooth: true
                                anchors.left: parent.left
                                anchors.leftMargin: 6
                                horizontalAlignment: TextInput.AlignLeft
                                font.family: "Hobo Std"
                                font.pixelSize: 16
                            }

                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    console.debug("regionInput")

                                    var component = Qt.createComponent("RegionSelectDialog.qml");
                                    if (component.status == Component.Ready)
                                    {
                                        var regionDialog = component.createObject(cookingDataEditorMainWindow);
                                        if( null == regionDialog)
                                        {
                                            console.debug("Create failed")
                                            return;
                                        }

                                        regionDialog.anchors.centerIn = cookingDataEditorMainWindow
                                        regionDialog.regionSelected.connect(changeRegion)
                                    }
                                }
                            }
                        }

                        Rectangle {
                            id: cuisineInputArea
                            x: 115
                            y: 60
                            width: 140
                            height: 36
                            color: "#ffffff"
                            radius: 10
                            anchors.right: parent.right
                            anchors.rightMargin: 60
                            border.width: 4
                            border.color: "#4acf9f"

                            TextInput {
                                id: cuisineInput
                                x: 10
                                y: 8
                                width: 100
                                height: 20
                                text: "PlaceHolder"
                                readOnly: true
                                smooth: true
                                horizontalAlignment: TextInput.AlignLeft
                                anchors.left: parent.left
                                anchors.leftMargin: 6
                                font.family: "Hobo Std"
                                font.pixelSize: 16
                            }

                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    console.debug("cuisineInput")

                                    var component = Qt.createComponent("CuisineSelectDialog.qml");
                                    if (component.status == Component.Ready)
                                    {
                                        var cuisineDialog = component.createObject(cookingDataEditorMainWindow);
                                        if( null == cuisineDialog)
                                        {
                                            console.debug("Create failed")
                                            return;
                                        }

                                        cuisineDialog.anchors.centerIn = cookingDataEditorMainWindow
                                        cuisineDialog.cuisineSelected.connect(changeCuisine)
                                    }
                                }
                            }
                        }
                    }

                    Rectangle {
                        x: 0
                        y: 100
                        width: 288
                        height: 2
                        color: "#ffffff"
                    }

                    Item {
                        id: item4
                        width: parent.width
                        height: 240

                        Column {
                            id: row1
                            anchors.fill: parent

                            Rectangle {
                                id: flavourInputArea
                                width: parent.width
                                height: parent.height/4
                                color: "lightblue"

                                Text {
                                    y: 23
                                    text: "Flavour"
                                    verticalAlignment: Text.AlignVCenter
                                    horizontalAlignment: Text.AlignHCenter
                                    anchors.left: parent.left
                                    anchors.leftMargin: 6
                                    anchors.verticalCenter: parent.verticalCenter
                                    font.family: "Hobo Std"
                                    font.pixelSize: 18
                                }

                                TextInput {
                                    id: flavourInput
                                    height: 20
                                    text: "PlaceHolder"
                                    anchors.right: parent.right
                                    anchors.rightMargin: 60
                                    anchors.verticalCenter: parent.verticalCenter
                                    readOnly: true
                                    smooth: true
                                    horizontalAlignment: TextInput.AlignLeft
                                    font.family: "Hobo Std"
                                    font.pixelSize: 16
                                }
                            }

                            Rectangle {
                                id: techniqueInputArea
                                width: parent.width
                                height: parent.height/4
                                color: "lightgreen"

                                Text {
                                    y: 23
                                    text: "Technique"
                                    verticalAlignment: Text.AlignVCenter
                                    horizontalAlignment: Text.AlignHCenter
                                    anchors.left: parent.left
                                    anchors.leftMargin: 6
                                    anchors.verticalCenter: parent.verticalCenter
                                    font.family: "Hobo Std"
                                    font.pixelSize: 18
                                }

                                TextInput {
                                    id: techniqueInput
                                    height: 20
                                    text: "PlaceHolder"
                                    anchors.right: parent.right
                                    anchors.rightMargin: 60
                                    anchors.verticalCenter: parent.verticalCenter
                                    readOnly: true
                                    smooth: true
                                    horizontalAlignment: TextInput.AlignLeft
                                    font.family: "Hobo Std"
                                    font.pixelSize: 16
                                }
                            }

                            Rectangle {
                                id: dishTypeInputArea
                                width: parent.width
                                height: parent.height/4
                                color: "dimgray"

                                Text {
                                    y: 23
                                    text: "DishType"
                                    verticalAlignment: Text.AlignVCenter
                                    horizontalAlignment: Text.AlignHCenter
                                    anchors.left: parent.left
                                    anchors.leftMargin: 6
                                    anchors.verticalCenter: parent.verticalCenter
                                    font.family: "Hobo Std"
                                    font.pixelSize: 18
                                }

                                TextInput {
                                    id: dishTypeInput
                                    height: 20
                                    text: "PlaceHolder"
                                    anchors.right: parent.right
                                    anchors.rightMargin: 60
                                    anchors.verticalCenter: parent.verticalCenter
                                    readOnly: true
                                    smooth: true
                                    horizontalAlignment: TextInput.AlignLeft
                                    font.family: "Hobo Std"
                                    font.pixelSize: 16
                                }
                            }

                            Rectangle {
                                id: foodTypeInputArea
                                width: parent.width
                                height: parent.height/4
                                color: "orange"

                                Text {
                                    y: 23
                                    text: "FoodType"
                                    verticalAlignment: Text.AlignVCenter
                                    horizontalAlignment: Text.AlignHCenter
                                    anchors.left: parent.left
                                    anchors.leftMargin: 6
                                    anchors.verticalCenter: parent.verticalCenter
                                    font.family: "Hobo Std"
                                    font.pixelSize: 18
                                }

                                TextInput {
                                    id: foodTypeInput
                                    height: 20
                                    text: "PlaceHolder"
                                    anchors.right: parent.right
                                    anchors.rightMargin: 60
                                    anchors.verticalCenter: parent.verticalCenter
                                    readOnly: true
                                    smooth: true
                                    horizontalAlignment: TextInput.AlignLeft
                                    font.family: "Hobo Std"
                                    font.pixelSize: 16
                                }
                            }
                        }
                    }

                    Rectangle {
                        x: 0
                        width: 288
                        height: 2
                        color: "#ffffff"
                    }
                }
            }

            Rectangle {
                id: rectangle11
                x: 173
                y: 407
                width: 100
                height: 100
                color: "#ffffff"
                radius: 10
                anchors.right: parent.right
                anchors.rightMargin: 32

                Text {
                    id: text16
                    text: "Edit Steps"
                    font.family: "Hobo Std"
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    wrapMode: Text.WordWrap
                    anchors.fill: parent
                    font.pixelSize: 30
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        // Show step editor
                        if(cookingDataEditorMainWindow.myStepEditor)
                        {
                            cookingDataEditorMainWindow.myStepEditor.visible = true;
                            return;
                        }

                        var component = Qt.createComponent("StepEditor.qml");
                        if (component.status == Component.Ready)
                        {
                            var stepEditor = component.createObject(cookingDataEditorMainWindow);
                            if( null == stepEditor)
                            {
                                console.debug("Create failed")
                                return;
                            }

                            stepEditor.anchors.centerIn = cookingDataEditorMainWindow
                            cookingDataEditorMainWindow.myStepEditor = stepEditor;
                        }
                    }
                }
            }
        }
    }
}


